import { useLayoutEffect, type FC } from 'react'
import { Form, Input, Button, Select } from 'antd'
import useArtEditStore, { selectBase, updateBase, updateCurrent } from '@/store/art-edit-store'

const EditBase: FC<{ cates: CateItem[] }> = ({ cates }) => {
  const [formRef] = Form.useForm()
  const baseForm = useArtEditStore(selectBase)

  useLayoutEffect(() => {
    formRef.setFieldsValue(baseForm)
  }, [baseForm, formRef])

  const onFinish = () => {
    updateCurrent()
  }
  const handleValuesChange = (values: Partial<ArticleBaseForm>) => {
    updateBase(values)
  }

  return (
    <>
      <Form form={formRef} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} onFinish={onFinish} onValuesChange={handleValuesChange} autoComplete="off">
        <Form.Item label="文章标题" name="title" rules={[{ required: true, message: '请填写文章标题!' }]}>
          <Input maxLength={30} placeholder="请填写文章标题" allowClear showCount />
        </Form.Item>

        <Form.Item label="文章分类" name="cate_id" rules={[{ required: true, message: '请选择文章分类!' }]}>
          <Select placeholder="请选择文章分类" allowClear options={cates} fieldNames={{ label: 'cate_name', value: 'id' }} />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
          <Button type="primary" htmlType="submit">
            下一步
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}

export default EditBase
